<template>
  <el-upload :http-request="httpRequest"
             action=""
             :show-file-list="false"
             class="
                z-clip-upload
                cursor-pointer
                relative
                overflow-hidden
                flex
                items-center
                justify-center
              ">
    <img v-if="currentValue"
         :src="currentValue"
         class="z-clip-upload--img" />
    <i v-else
       class="el-icon-plus z-clip-upload--icon"></i>
  </el-upload>
</template>

<script>
import useBlob from '@/components/storybook/hooks/useBlob'
import { get } from 'lodash'

export default {
  name: 'ZClipUpload',
  props: {
    value: {
      type: String
    }
  },
  computed: {
    currentValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    async httpRequest (data) {
      try {
        const file = await useBlob(data.file)

        const paramsUpload = {
          file,
          path: 'apps',
          bucket: 'widget'
        }
        const { postUploadImg } = this.$interface.system
        const { data: response } = await postUploadImg(paramsUpload)
        if (response.code !== 0) {
          throw response.msg
        }
        this.currentValue = get(response, 'data.src')
      } catch (error) {
      } finally {
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.z-clip-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 80px;
  height: 80px;
  &--img {
    display: block;
  }
  &--icon {
    font-size: 28px;
    color: #8c939d;
  }
  &:hover {
    border-color: #409eff;
  }
}
</style>
